<template>
  <div class="box">
    <div class="title">
      <!-- 第一个插槽，通过 name 指定名字 title -->
      <slot name="title" >
        <h4>{{ defaultObject.one }}</h4>
      </slot>
      <span
        class="btn"
        @click=" isShow = !isShow "
      >
        {{ isShow ? '收起' : '展开' }}
      </span>
    </div>
    <div
      class="container"
      v-show="isShow"
    >
      <!-- 第二个插槽，通过 name 指定名字 content -->
      <slot name="content" :row="defaultObject">
        <p>组件默认内容</p>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 为了方便查看传递过来的HTML结构，默认展开面板
      isShow: true,
      defaultObject: {
        one: "组件内部数据1",
        two: "组件内部数据2",
      },
    };
  },
};
</script>


<style scoped>
</style>